<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom)+'px'}">
		<navbar title="维权咨询"></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<view class="form-main">
				<uni-forms :modelValue="formData" label-position="top" :rules="rules" label-width="300">
					<uni-forms-item label="类别" name="sort">
						<view class="form-select" @click="pickerOpen('sort')">
							<uni-easyinput type="text" v-model="formData.sort" class="shadow" disabled
								placeholder="请选择" />
							<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="内容" name="cnt">
						<view class="">
							<uni-easyinput type="textarea" v-model="formData.cnt" class="shadow"
								placeholder="请输入300字内容描述" maxlength="300" />
							<uni-data-checkbox v-model="formData.isNiming" style="margin-left: 10upx;" multiple
								:localdata="workDataList"></uni-data-checkbox>
						</view>
					</uni-forms-item>
					<uni-forms-item label="姓名" name="name" v-if="formData.isNiming==0">
						<uni-easyinput v-model="formData.name" placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="jobContent" v-if="formData.isNiming==0">
						<view class="form-code">
							<view class="form-code-input">
								<input v-model="formData.tel" type="number" placeholder="请填写手机号" class="tel"></input>
								<text></text>
								<input v-model="formData.code" type="number" placeholder="请输入验证码" class="code"></input>
							</view>
							<view class="form-code-btn" :class="{'disabled':isSend}" @click="sendCode">{{sendTitle || '获取验证码'}}
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="form-tip">
					提示：工作人员将在3个工作日内回电，请保持手机通畅。
				</view>
				<view class="form-tip">
					咨询热线：{{usual.weiquanTel}}
				</view>
				<view class="form-button" @click="submit">
					确认提交
				</view>
			</view>

		</view>
		<view class="main-bj">

		</view>
		<picker-view ref="pickerRef" :list="list" @confirm="onConfirm"></picker-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import PickerView from "@/components/PickerView.vue";
	import {
		validateFunc
	} from "@/utils/util.js"
	import {
		sendCodeFunc,
	} from "@/core/web-api/login.js"
	import {getData} from "@/core/web-api/common.js"
	import {submitConsolt} from "@/core/web-api/qiuzhiduan.js"
	export default {
		components: {
			Navbar,
			PickerView
		},
		data() {
			return {
				isSend: false,
				formData: {
					cnt: "",
					code: "",
					isNiming: 0,
					name: "",
					sort: "",
					tel: "",
					type: 0
				},
				bottomBtnHeight: uni.upx2px(140),
				rules: {},
				workDataList: [{
					value: 1,
					text: "匿名"
				}],
				list:[],
				time: 59,
				timer: null,
				sendTitle: "",
				isSend: false,
			}
		},
		methods: {
			/**
			 * 提交
			 */
			submit(){
				let title = this.validate();
				if(title===false){
					return false;
				}
				if(title){
					uni.showToast({
						title,
						icon:"none"
					})
					return;
				}
				let formData = JSON.parse(JSON.stringify(this.formData));
				formData.type = this.type || "1"
				formData.isNiming = formData.isNiming.length>0? "1":"0"
				submitConsolt(formData).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:res.code==20000? "success":"none",
						duration:1500
					})
				})
			},
			/**
			 * 发送验证码
			 */
			sendCode() {
				if(this.codeValidate()!=2) return;
				if (this.isSend) return;
				this.isSend = true;
				this.sendTitle = `${this.time}秒后重发`
				this.sendTel();
				this.timer = setInterval(() => {
					this.time--;
					this.sendTitle = `${this.time}秒后重发`
					if (this.time == 0) {
						clearInterval(this.timer);
						this.time = 60;
						this.isSend = false;
						this.sendTitle = "";
					}
				}, 1000)
			},
			/**
			 * 发送手机号验证码
			 */
			sendTel() {
				sendCodeFunc({
					phone: this.formData.tel,
					type: "login"
				}).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: "发送成功"
						})
					}
				})
			},
			/**
			 * 验证手机号
			 */
			codeValidate(){
				let code = validateFunc(this.formData.tel, 'tel')
				if (code != 2) {
					uni.showToast({
						title: code == 0 ? "请输入手机号码" : "手机号码格式错误",
						icon: "none"
					})
					return code;
				}
				return code;
			},
			/**
			 * 表单验证
			 */
			validate(){
				let title = "";
				let code = this.codeValidate()
				 if(code!=2){
					return false;
				}else if(!this.formData.code){
					return "请输入验证码";
				}else if(!this.formData.cnt){
					return "请输入内容";
				}else if(!this.formData.sort){
					return "请选择板块";
				}else if(!this.formData.isNiming && !this.formData.name){
					return "请选择匿名或者输入姓名";
				}
			},
			
			/**
			 * 弹出选择板块
			 */
			pickerOpen(){
				this.$refs.pickerRef.open();
			},
			
			/**
			 * 选择板块
			 */
			onConfirm(){
				this.formData.sort = this.$refs.pickerRef.value;
			},
			
			/**
			 * 加载数据
			 */
			getCataList(){
				getData({
					sortList:["咨询板块"]
				}).then(res=>{
					if(res.code==20000){
						this.list = res.data.list && res.data.list.length>0? res.data.list[0].list:[];
					}
				})
			}

		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
			...mapState(['usual','type'])
		},
		created(){
			this.getCataList()
		}
	}
</script>

<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.main {
		width: 100%;
		padding: 0 60upx;
		box-sizing: border-box;

		&-line {
			display: flex;
			position: relative;
			width: 100%;

			&-title {
				text-align: center;
				font-size: 38upx;
				color: #000;
				width: 100%;
			}

			&-icon {
				position: absolute;
				left: 45upx;
				display: flex;
				align-items: center;
			}
		}

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}
	}

	.upload {
		&-create {
			width: 295upx;
			height: 198upx;
			border-radius: 10upx;
			background-color: #e6e7e8;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.form {
		width: 100%;
		margin-top: 40upx;
		
		/deep/ .uni-easyinput__content.is-disabled {
			color: #333;
		}
		
		&-select {
			position: relative;
		
			&-icon{
				position: absolute;
				right: 20upx;
				height: 60upx;
				display: flex;
				align-items: center;
				top: 0;
			}
		}

		&-button {
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			font-size: 30upx;
			width: 598upx;
			background: linear-gradient(to bottom, #5472fd, #6ca5fd);
			color: #ffffff;
			margin-top: 50upx;
		}

		&-main {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
		}

		&-code {
			width: 100%;
			display: flex;
			height: 60upx;
			border-radius: 10upx;
			background-color: #fff;
			align-items: center;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);

			&-input {
				display: flex;
				align-items: center;
				flex: 1;
			}

			input {
				padding-left: 20upx;
				box-sizing: border-box;
				width: 220upx;
			}

			text {
				// font-size: 26upx;
				// color: #666666;
				// font-weight: bold;
				// line-height: 26upx;
				display: block;
				height: 24upx;
				width: 3upx;
				background-color: #666;
			}

			&-btn {
				width: 123upx;
				height: 42upx;
				border-radius: 6upx;
				border: 1upx solid #0180ff;
				font-size: 22upx;
				color: #0180ff;
				background-color: #f9f9f9;
				text-align: center;
				line-height: 42upx;
				margin-right: 10upx;
				box-sizing: border-box;

				&.disabled {
					border-color: #ccc;
					color: #666;

				}
			}
		}

		&-line {
			display: flex;
			align-items: center;
		}


		&-tip {
			font-size: 30upx;
			color: #000;
			width: 100%;
			text-align: left;
			margin: 30upx 0;
		}

		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}

		/deep/ .uni-easyinput {
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;

			text {
				font-size: 30upx;
				color: #000;
			}
		}

		/deep/ .uni-forms {
			width: 100%;
		}

		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 10upx;
		}

		/deep/ .input-value {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
		}

		/deep/ .checklist-box {
			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>